import React from 'react'
import { Form, Input, Select, DatePicker, message, Row, Col } from "antd"
import { useDispatch } from "umi"
import rewardList from "@/staticLists/rewardList";
import { rewardRule } from "@/utils/rules";
import { createOption } from "@/utils/selectOption";
import { mapData } from "@/utils/mapData";
import $http from "@/services";
import UploadComp from '@/components/UploadComponent/UploadComp';
import moment from 'moment';
export default function index({ _initrewAndPubList, rewAndPubDetail }) {
    const [form] = Form.useForm();
    const dispatch = useDispatch();
    console.log(rewAndPubDetail)

    const checkForm = async (item) => {
        try {
            await form.validateFields();
            const res = form.getFieldValue(item.itemName);
            const { data, code, msg } = await $http.updateRewardAndPunishment({
                _id: rewAndPubDetail._id,
                type: item.itemName,
                updateVal: item.itemName === 'file' ? item.value : res
            });
            if (code) return message.error(msg);
            message.success(msg);
            dispatch({
                type: "rewardAndPunishment/getDetailRewAndPub",
                payload: rewAndPubDetail._id
            });
            _initrewAndPubList();

        } catch (err) {
            console.log(err)
        }

    }

    // 节点的创建
    const RewAndPubNode = {
        input(item) {
            return <Input className="border-color" onBlur={() => checkForm(item)}></Input>
        },
        date(item) {
            return <DatePicker style={{ width: "100%" }} onChange={() => checkForm(item)}></DatePicker>
        },
        select(item) {
            return <Select options={createOption(mapData[item.optionName])} onChange={() => checkForm(item)}></Select>
        },
        upload(item) {
            return <UploadComp avatar={item.file} getNewAvatar={(newAvatar) => {
                checkForm({ itemName: 'file', value: newAvatar });

            }}></UploadComp>
        },
        popover(item) {
            return <Input readOnly disabled={item.itemName === 'staffName'}></Input>
        }
    }
    return (
        <Form layout='vertical' form={form} initialValues={{
            ...rewAndPubDetail,
            staffName: rewAndPubDetail.staffName.userName,
            date: moment(rewAndPubDetail.date)
        }}>
            {rewardList.map((el, index) => {
                return (<Row justify={'space-between'} key={index}>
                    {el.map((item, childIndex) => {
                        return <Col span="11" key={childIndex}>
                            <Form.Item
                                name={item.itemName}
                                label={item.labelTxt}
                                rules={rewardRule[item.itemName]}>
                                {RewAndPubNode[item.renderType](item)}
                            </Form.Item>
                        </Col>
                    })}
                </Row>)
            })}
        </Form>
    )
}
